@charset "utf-8";

@function vw($a){
    @return ( $a / 320 ) * 100vw;
}
@function top($b){
    @return ( $b / 486 ) * 100%;
}
@mixin imgsize{
    width: 100%;
    height: 100%;
    img{
        height: 100%;
        width: 100%;
    }
}
html,body,.web,.swiper-container,.swiper-wrapper{
    width: 100%;
    height: 100%;
    background: #000000;
    color: #FFFFFF;
}
.web{
    position: relative;
}
.music{
    position: fixed;
    z-index: 10;
    width: vw(40);
    height: vw(40);
    right: vw(20);
    top: top(20);
    overflow: hidden;
    img{
        width: 100%;
        height: 100%;
        filter: #ffffff;
    }
}
.rotatemusic{
    animation: rotatemusic 2.5s linear infinite;
}
@keyframes rotatemusic{
    0%{
        transform: rotateZ(0);
    }
    100%{
        transform: rotateZ(360deg);
    }
}
.page{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../img/bgpic.png);
    background-size: 100% 100%;
    ul{
        width: 100%;
        height: 100%;
        position: relative;
        li{
            position: absolute;
            
        }
    }
}
.page1{
    
        
        li#logo{
            width: vw(149);
            height: vw(40);
            top: top(20);
            left: vw(85.5);
            .logo{
                font-size: vw(24);
                line-height: vw(40);
                p{
                    width: vw(139);
                    float: right;
                    text-align: center;
                    font-weight: bold;
                }   
            } 
        }
        li#kuang{
            width: vw(234);
            height: vw(141);
            top: top(62);
            left: vw(43);
            .kuang{
                @include imgsize;
            }
        }
        li#kuang-text1{
            width: vw(234);
            height: vw(24);
            left: vw(43);
            top: top(68);
            .kuang-text1{
                line-height: vw(24);
                font-size: vw(20);
                text-align: center;
                font-weight: bold;
            }  
        }
        li#kuang-text2{
            width: vw(234);
            height: vw(40);
            top: top(96);
            left: vw(43);
            .kuang-text2{
                line-height: vw(40);
                font-size: vw(40);
                text-align: center;
                font-weight: bold;
            }
        }
        li#kuang-text3{
            width: vw(234);
            height: vw(20);
            top: top(140);
            left: vw(43);
            .kuang-text3-box{
                width: vw(154);
                height: 100%;
                margin: 0 auto;
                transform: rotateX(90deg);
                .kuang-text3{
                    float: left;
                    width: 50%;
                    height: 100%;
                    text-align: center;
                    font-size: vw(10);
                    line-height: vw(20);
                }
                .kuang-text3:first-child{
                    background: white;
                    color: black;
                }
                .kuang-text3:nth-child(2){
                    background: black;
                    color: white;
                }
            }
        }
        .kuang-text3-a{
            animation: kuang-text3-a forwards;
//          -webkit-animation: kuang-text3-a forwards;
//          -moz-animation: kuang-text3-a forwards;
        }
        @keyframes kuang-text3-a{
            0%{
                opacity: 0;
                transform: rotateX(90deg);
            }
            100%{
                opacity: 1;
                transform: rotateX(0);
            }
        }
        li#kuang-text4{
            width: vw(234);
            height: vw(12);
            top: top(170);
            left: vw(43);
            .kuang-text4{
                font-weight: bold;
                font-size: vw(12);
                line-height: vw(12);
                text-align: center;
            }
        }
        .kuang-text4-a{
            animation: kuang-text4-a ease;
        }
        @keyframes kuang-text4-a{
            0%{
                transform: translateY(vw(200));
            }
            100%{
                transform: translateY(0);
            }
        }
        li#page1-pic0{
            width: vw(301);
            height: vw(51);
            top: top(322.5);
            left: vw(9.5);
            .page1-pic0{
                @include imgsize;
            }
        }
        li#page1-pic1{
            width: vw(72);
            height: vw(50);
            top: top(295);
            left: vw(34.5);
            .page1-pic1{
                transform: rotateX(90deg);
                @include imgsize;
            }
        }
        li#page1-pic2{
            width: vw(51);
            height: vw(53);
            top: top(301);
            left: vw(108.5);
            z-index: 2;
            .page1-pic2{
                transform: rotateY(90deg);
                @include imgsize;
            }
        }
        .page1-pic2-a{
            animation: page1-pic2-a ease forwards;
        }
        @keyframes page1-pic2-a{
            0%{
                transform: rotateY(90deg);
            }
            100%{
                transform: rotateY(0);
            }
        }
        li#page1-pic6{
            width: vw(47);
            height: vw(104);
            top: top(256.5);
            left: vw(131);
            .page1-pic6{
                @include imgsize;
            }
        }
        li#page1-pic3{
            width: vw(25);
            height: vw(206);
            top: top(235);
            left: vw(195);
            .page1-pic3{
                transform: rotateY(90deg);
                @include imgsize;
            }
        }
        li#page1-pic4{
            width: vw(207);
            height: vw(66);
            top: top(236.5);
            left: vw(45.5);
            .page1-pic4{
                @include imgsize;
            }
        }
        li#page1-pic5{
            width: vw(30);
            height: vw(24);
            top: top(265.5);
            left: vw(111.5);
            .page1-pic5{
                @include imgsize;
            }
        }
        .page1-pic5-a{
            animation: page1-pic5-a ease forwards;
        }
        @keyframes page1-pic5-a{
            0%{
                transform: translateX(vw(-200));
            }
            100%{
                transform: translateX(0);
            }
        }
        li#page1-pic7{
            width: vw(29);
            height: vw(24);
            top: top(290.5);
            left: vw(167);
            .page1-pic7{
                @include imgsize;
            }
        }
        li#page1-nav{
            width: vw(240);
            height: vw(60);
            top: top(405);
            left: vw(40);
            .page1-nav{
                width: 100%;
                height: 100%;
                font-size: 0;
                transform: translateY(vw(200));
                .page1-nav1{
                    display: inline-block;
                    width: 25%;
                    height: 100%;
                    .page1-nav1-box{
                        width: vw(40);
                        height: 100%;
                        margin: 0 auto;
                        .page1-nav1-pic{
                            width: vw(40);
                            height: vw(40);
                            border: 1px solid #FFFFFF;
                            border-radius: 5px;
                        }
                        p{
                            font-size: vw(10);
                            text-align: center;
                            line-height: vw(20);
                        }
                    }
                }
            }
        }
        .page1-nav-a{
            animation: page1-nav-a ease forwards;
        }
        @keyframes page1-nav-a{
            0%{
                transform: translateY(vw(200));
            }
            100%{
                transform: translateY(0);
            }
        }
    
}
#bg1{
    top: 28.8%;
    width: vw(323);
    left: vw(-1.5);
    height: vw(324);
    .bg1{
        @include imgsize;
    }
}
#bg2{
    width: vw(390);
    height: vw(388);
    top: vw(-25);
    left: vw(-35);
    .bg2{
        @include imgsize;
    }
}
#page-next{
    width: vw(24);
    height: vw(14);
    bottom: top(30);
    left: vw(148);
    .page-next{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .page-next::before{
        position: absolute;
        top: 0;
        left: vw(6);
        content: "";
        width: 25%;
        height: 100%;
        background: #FFFFFF;
        transform: rotateZ(45deg);
    }
    .page-next::after{
        position: absolute;
        top: 0;
        right: vw(6);
        content: "";
        width: 25%;
        height: 100%;
        background: #FFFFFF;
        transform: rotateZ(-45deg);
    }
}
.page-next-a{
    animation-delay: 0.5s;
    animation: page-next-a infinite;
}
@keyframes page-next-a{
    0%{
        transform: translateY(vw(50));
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    100%{
        transform: translateY(0);
        opacity: 0;
    }
}
.page2{
    
    #page2-pic-box{
        width: vw(250);
        height: vw(300);
        top: top(105);
        left: vw(35);
        font-size: 0;
        .page2-pic{
            display: inline-block;
            width: vw(121);
            height: vw(94);
            border: 1px solid #FFFFFF;
            margin-bottom: vw(9);
            overflow: hidden;
            img{
                height: 100%;
            }
        }
        .page2-pic:nth-child(odd){
            float: left;
        }
        .page2-pic:nth-child(even){
            float: right;
        }
        .page2-pic:nth-last-child(-n+2){
            margin-bottom: 0;
        }
    }
}
#page2-box{
        width: vw(300);
        height: top(476);
        top: top(5);
        left: vw(10);
        .page2-box{
            border: 1px solid #FFFFFF;
            width: 100%;
            height: 100%;
        }
    }
    #page2-title-box{
        top: top(6);
        left: vw(78);
        width: vw(164);
        height: vw(62);
        .page2-title-box{
            width: 100%;
            height: 100%;
            background: #FFFFFF;
        }
        
    }
    #page2-title-1{
        width: vw(164);
        height: vw(20);
        top: top(18);
        left: vw(78);
        color: #000000;
        text-align: center;
        font-size: vw(20);
        line-height: vw(20);
        letter-spacing: vw(5);
    }
    #page2-title-2{
        width: vw(164);
        height: vw(16);
        top: top(40);
        left: vw(78);
        color: #000000;
        text-align: center;
        font-size: vw(12);
        line-height: vw(16);
    }
    #baixian1{
        top: top(91);
        left: vw(35);
    }
    #baixian2{
        top: top(423);
        left: vw(35);
    }
    .hengxian{
        animation: hengxian ease forwards;
    }
    @keyframes hengxian{
        0%{
            transform: translateX(vw(-20));
            opacity: 1;
        }
        25%{
            transform: translateX(vw(15));
            opacity: 1;
        }
        50%{
            transform: translateX(vw(-10));
            opacity: 1;
        }
        75%{
            transform: translateX(vw(5));
            opacity: 1;
        }
        100%{
            transform: translateX(0);
            opacity: 1;
        }
    }
.page-line{
    width: vw(250);
    border-top: 1px solid #FFFFFF;
    opacity: 0;
}

.page3{
    #page3-pic1{
        width: vw(244);
        height: vw(133);
        top: top(120);
        left: vw(38);
        img{
            width: 100%;
            height: 100%;
        }
    }
    #page3-text{
        width: vw(230);
        height: vw(80);
        top: top(265);
        left: vw(45);
        .page3-text{
            width: 100%;
            height: 100%;
            font-size: vw(12);
            line-height: vw(20);
            text-align: justify;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
    }
    #page3-white{
        width: vw(240);
        height: vw(35);
        top: top(365);
        left: vw(40);
        .page3-white{
            width: 100%;
            height: 100%;
            background: #FFFFFF;
        }
    }
    #page3-white-text{
        width: vw(240);
        height: vw(35);
        top: top(365);
        left: vw(40);
        .page3-white-text{
            font-size: vw(20);
            line-height: vw(35);
            color: black;
            text-align: center;
        }
    }
}

.page4{
    .page4-white1{
        width: vw(200);
        height: vw(40);
        top: top(30);
        left: vw(60);
        .page4-white{
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
        }
    }
    #page4-title{
        width: vw(200);
        height: vw(40);
        top: top(30);
        left: vw(60);
        .page4-title{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: vw(20);
            line-height: vw(40);
            color: black;
        }
    }
    #page4-square{
        width: vw(10);
        height: vw(20);
        top: top(80);
        left: vw(155);
        .page4-square{
            width: 100%;
            height: 100%;
            background: #FFFFFF;
            opacity: 0;
        }
    }
    .xialuo{
        animation: xialuo linear backwards;
    }
    @keyframes xialuo{
        0%{
            opacity: 0;
            
        }
        10%{
            opacity: 1;
        }
        100%{
            opacity: 1;
            transform: translateY(vw(300));
        }
    }
    #page4-xian{
        width: vw(2);
        height: vw(280);
        top: top(80);
        left: vw(159);
        .page4-xian{
            width: 100%;
            height: 100%;
            background: #FFFFFF;
            opacity: 0;
        }
    }
    .xialuoxian{
        transform-origin: top;
        animation: xialuoxian linear forwards;
    }
    @keyframes xialuoxian{
        0%{
            opacity: 0;
            transform: scaleY(0);
        }
        10%{
            opacity: 1;
        }
        100%{
            opacity: 1;
            transform: scaleY(1);
        }
    }
    .page-left{
        width: vw(90);
        height: vw(40);
        .page4-left1{
            text-align: right;
            font-size: vw(16);
            line-height: vw(40);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0;
        }   
    }
    #page4-left1{
        top: top(100);
        left: vw(50);
    }
    #page4-left2{
        top: top(140);
        left: vw(50);
    }
    #page4-left3{
        top: top(180);
        left: vw(50);
    }
    #page4-left4{
        top: top(220);
        left: vw(50);
    }
    #page4-left5{
        top: top(260);
        left: vw(50);
    }
    #page4-left6{
        top: top(300);
        left: vw(50);
    }
    .youhua{
        animation: youhua ease forwards;
    }
    @keyframes youhua{
        0%{
            opacity: 1;
            transform: translateX(vw(160));
        }
        100%{
            opacity: 1;
            transform: translateX(0);
        }
    }
    .page-right{
        width: vw(90);
        height: vw(40);
        .page4-right1{
            text-align: left;
            font-size: vw(16);
            line-height: vw(40);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0;
        }   
    }
    #page4-right1{
        top: top(100);
        right: vw(50);
    }
    #page4-right2{
        top: top(140);
        right: vw(50);
    }
    #page4-right3{
        top: top(180);
        right: vw(50);
    }
    #page4-right4{
        top: top(220);
        right: vw(50);
    }
    #page4-right5{
        top: top(260);
        right: vw(50);
    }
    #page4-right6{
        top: top(300);
        right: vw(50);
    }
    .zuohua{
        animation: zuohua ease forwards;
    }
    @keyframes zuohua{
        0%{
            opacity: 1;
            transform: translateX(vw(-160));
        }
        100%{
            opacity: 1;
            transform: translateX(0);
        }
    }
    .page4-yuans{
        width: vw(256);
        height: vw(42);
        top: top(400);
        left: vw(32);
        .page4-yuan{
            @include imgsize;
            opacity: 0;
        }
    }
    .fangda{
        animation: fangda ease forwards;
    }
    @keyframes fangda{
        0%{
            opacity: 1;
            transform: scale(0);
        }
        90%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: scale(1);
        }
    }
    #page4-yuan1{
        transform: scale(0.2);
        z-index: 7;
    }
    #page4-yuan2{
        transform: scale(0.4);
        z-index: 6;
    }
    #page4-yuan3{
        transform: scale(0.6);
        z-index: 5;
    }
    #page4-yuan4{
        transform: scale(0.8);
        z-index: 4;
    }
    #page4-yuan6{
        transform: scale(1);
        z-index: 3;
    }
    #page4-yuan7{
        transform: scale(1.2);
        z-index: 2;
    }
    .page4-pic{
        width: vw(114);
        height: vw(112);
        .page4-pic1{
            @include imgsize;
        }
    }
    #page4-pic1{
        top: top(350);
        left: vw(23);
    }
    #page4-pic2{
        top: top(350);
        right: vw(23);
        transform: rotateY(180deg);
    }
}
.flicker-in-1 {
    -webkit-animation: flicker-in-1 2s linear both;
            animation: flicker-in-1 2s linear both;
}
@-webkit-keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
